<template>
  <view class="number-box">
    <view class="number-box-minus" @click="handleMinus"> </view>
    <input
      type="number"
      :value="modelValue"
      @bulr="handleChange"
      @input="handleInput"
    />
    <view class="number-box-plus" @click="handlePlus"> </view>
  </view>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: Number,
    default: 0
  }
})
const emit = defineEmits(['update:modelValue', 'change'])
const handleChange = (e) => {
  console.log(e.detail.value)
}
const handleInput = (e) => {
  emit('update:modelValue', e.detail.value)
}
const handlePlus = () => {
  console.log('plus')
  emit('change', 1)
}
const handleMinus = () => {
  console.log('minus')
}
</script>

<style lang="scss" scoped>
.number-box {
  display: flex;
  align-items: center;
  background-color: #f4f5f7;
  border-radius: 24rpx;
  .number-box-minus {
    width: 48rpx;
    height: 48rpx;
    background: url('/static/images/minus.svg') no-repeat center center;
    background-size: 100% 100%;
  }
  .number-box-plus {
    width: 48rpx;
    height: 48rpx;
    background: url('/static/images/plus.svg') no-repeat center center;
    background-size: 100% 100%;
  }
  input {
    width: 60rpx;
    font-size: 28rpx;
    text-align: center;
    padding: 0 10rpx;
  }
}
</style>
